@page "/scheduler/block-out-dates-and-hours"

@using Syncfusion.Blazor.Schedule
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This example shows how to block specific time intervals or days on the Scheduler.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, few blocked events are defined to block the specific time range with the text “Not Available”.
        No events can be created on those blocked time range as well as edited through it. These blocked events can be
        defined by setting <code>IsBlock</code> field to true within the <code>EventSettings</code> and assigned
        altogether with the events <code>DataSource</code>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.BlockData" Width="100%" Height="650px" CssClass="block-events" @bind-CurrentView="@CurrentView" @bind-SelectedDate="@CurrentDate">
            <ScheduleGroup Resources="@GroupData" EnableCompactView="false"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ScheduleData.EmployeeData" TValue="int" DataSource="@ResourceData" Field="EmployeeId" Title="Employees" Name="Employee" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="false"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleTemplates>
                <ResourceHeaderTemplate>
                    @{
                        var resourceData = (context as TemplateContext).ResourceData as ScheduleData.EmployeeData;
                        <div class="template-wrap">
                            <div class="employee-category">
                                <img class="employee-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/{resourceData.Text}.png")" />
                                <div class="employee-name">@(resourceData.Text)</div>
                                <div class="employee-designation">@(resourceData.Designation)</div>
                            </div>
                        </div>
                    }
                </ResourceHeaderTemplate>
            </ScheduleTemplates>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineMonth"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 1);
    private View CurrentView = View.TimelineDay;
    public List<ScheduleData.BlockData> DataSource = new ScheduleData().GetBlockData();
    public string[] GroupData { get; set; } = { "Employee" };
    public List<ScheduleData.EmployeeData> ResourceData { get; set; } = new List<ScheduleData.EmployeeData> {
        new ScheduleData.EmployeeData { Text = "Alice", Id = 1, GroupId = 1, Color = "#bbdc00", Designation = "Content writer" },
        new ScheduleData.EmployeeData { Text = "Nancy", Id = 2, GroupId = 2, Color = "#9e5fff", Designation = "Designer" },
        new ScheduleData.EmployeeData { Text = "Robert", Id = 3, GroupId = 1, Color = "#bbdc00", Designation = "Software Engineer" },
        new ScheduleData.EmployeeData { Text = "Robson", Id = 4, GroupId = 2, Color = "#9e5fff", Designation = "Support Engineer" },
        new ScheduleData.EmployeeData { Text = "Laura", Id = 5, GroupId = 1, Color = "#bbdc00", Designation = "Human Resource" },
        new ScheduleData.EmployeeData { Text = "Margaret", Id = 6, GroupId = 2, Color = "#9e5fff", Designation = "Content Analyst" }
    };
}
<style>

    .e-schedule .template-wrap {
        width: 100%;
    }

    .e-schedule .e-vertical-view .e-resource-cells {
        height: 58px;
    }

    .e-schedule .e-timeline-view .e-resource-left-td,
    .e-schedule .e-timeline-month-view .e-resource-left-td {
        width: 170px;
    }

    .e-schedule .e-resource-cells.e-child-node .employee-category,
    .e-schedule .e-resource-cells.e-child-node .employee-name {
        padding: 5px
    }

    .e-schedule .employee-image {
        width: 45px;
        height: 40px;
        float: left;
        border-radius: 50%;
        margin-right: 10px;
    }

    .e-schedule .employee-name {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .e-schedule .employee-designation {
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
